// cover some element-ui styles
@use './variables.scss';
@use './mixin.scss';

.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
}

.el-upload {
  input[type='file'] {
    display: none !important;
  }
}

.el-upload__input {
  display: none;
}

// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
  transform: none;
  left: 0;
  position: relative;
  // margin: 0 auto;
}

// refine element ui upload
.upload-container {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}

// dropdown
.el-dropdown-menu {
  a {
    display: block;
  }
}

// to fix el-date-picker css style
.el-range-separator {
  box-sizing: content-box;
}

// 默认240宽度
$width: var(--form-input-width, 240px);
/** form表单 **/
.el-form {
  &--label-top {
    // 文字在顶部的情况下，避免文本占据过多的高度
    .el-form-item__label {
      padding: 0;
    }
  }
}

.el-form-item {
  margin-bottom: variables.$mainSpace;

  // 如果当前el-form-item没有label 通过添加该class去掉其margin-left的值
  &.efi__withOutLabel {
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }

  &__label,
  &__content {
    line-height: variables.$elFormHeight;
  }

  // 暂时不加冒号
  &__label {
    // position: relative;
    padding-right: 10px;
    // &::after {
    //   content: ":";
    //   position: absolute;
    //   right: 5px;
    //   height: 100%;
    //   line-height: $elFormHeight;
    // }
  }
  .el-input:not(.el-pagination__editor),
  .el-select,
  .el-textarea,
  .el-date-editor,
  .el-input-number {
    @if $width == 'fullWidth' {
      width: 100%;
    } @else if $width == 'mini' {
      width: 60px;
    } @else {
      width: #{$width};
    }
  }

  .el-select > .el-input {
    width: 100%;
  }
}

// 任意固定宽度的设置，如果不能撑出父元素的高度，可以添加最大100%的限制
.el-input.max-width-parent,
.el-select.max-width-parent,
.el-textarea.max-width-parent {
  max-width: 100%;
}

.el-radio-group {
  min-width: #{$width};
}

.el-dropdown {
  .el-dropdown__caret-button {
    min-width: initial;
  }
}

.lc-editor,
.lc-renderEngine,
.lc-layout-outer-content,
.lc-dialog {
  height: 100%;
  display: flex;
  flex-direction: column;

  .el-dialog__body {
    flex: 1;
    overflow: auto;
  }
}

// .el-radio__input.is-checked .el-radio__inner {
//   background: black !important;
//   border-color: var(--el-color-primary);
// }

// 任意固定宽度的设置，如果不能撑出父元素的高度，可以添加最大100%的限制
.el-input.max-width-parent {
  max-width: 100%;
}

// 默认值是30px，太宽了 节约点儿空间
.el-input--suffix .el-input__inner {
  padding-right: 15px;
}

.el-input__icon {
  line-height: 32px;
}

// 日期时间选择器
.el-date-editor {
  &.el-date-editor--datetimerange {
    .el-range-input {
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .el-input__icon,
  .el-range-separator {
    height: fit-content;
  }
}

// 消息提示
.el-message {
  padding: 8px 8px 8px 16px;
}

// table表格
.el-table {
  &__header {
    height: 56px;
  }

  &__row {
    height: 56px;
    &:hover {
      cursor: pointer;
    }
  }

  // 暂时数据样式调整
  &__empty-block {
    flex-direction: column;
    margin-top: variables.$mainSpace;

    &::before {
      content: '';
      @include mixin.noDataBase;
      display: block;
      margin: 0 auto;
    }
  }

  .hide-select-all {
    .cell {
      .el-checkbox {
        display: none !important;
      }
    }
  }
}

// 消息弹窗
$msgBox: el-message-box;

.#{$msgBox} {
  padding-bottom: 20px;

  &__title {
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
  }

  &__headerbtn {
    .#{$msgBox}__close {
      font-size: 16px;
    }
  }
  &__container{
    justify-content: center;
  }
  &__content {
    margin: 5px 0;
    text-align: center;

    .#{$msgBox}__status {
      display: none;
    }

    .#{$msgBox}__message {
      padding: 0;
    }
  }

  &__btns {
    text-align: center;
    justify-content:center;
    button {
      width: 78px;
      height: 30px;
      line-height: 30px;
      padding: 0;
    }
  }
}

// 消息提示
.el-message {
  padding: 10px 10px 10px 16px;
  font-size: 14px;
}

// 树
.el-tree {
  .el-tree-node.is-current {
    > .el-tree-node__content {
      background-color: var(--bk-gray-color);

      .el-tree-node__label,
      .custom-tree-node {
        color: var(--primary-color);
      }
    }
  }
}

/**
** 系统中还在用的element样式，又想复写一套样式
**/
// 根据标记
.el-badge.lcds-el-badge {
  .el-badge__content {
    background-color: #f7e8e9;
    color: #e34d59;
    min-width: 32px;
    height: 17px;
    line-height: 17px;
    border-radius: 4px;
  }
}

/** 
 ** 分页样式重写
 **/
.el-pagination {
  display: flex;
  align-items: center;
  & {
    padding: 10px 0;
  }
  .el-select__wrapper {
    height: 32px;
    margin: 0 5px;
  }
  .el-pagination__total {
    color: var(--text-color-1);
    margin-right: 0px;
    &::after {
      content: '，';
    }
  }
  span.el-pagination__sizes {
    .el-select {
      width: 105px;
    }
  }

  .lc-pagination-sizer {
    font-size: 14px;
    color: var(--text-color-1);
    font-weight: normal;
    display: inline-block;
    width: 120px;
    display: flex;
    align-items: center;
  }
  .el-pager {
    li:not(.disabled).active.active {
      background-color: var(--primary-bg-color);
      color: var(--block-bg-color);
    }
    li {
      background-color: var(--block-bg-color);
      border: 1px solid var(--border-color);
      margin-left: 5px;
      &:last-child {
        margin-right: 5px;
      }
    }
  }
  .btn-prev,
  button,
  .btn-next {
    background-color: var(--block-bg-color);
    border: 1px solid var(--border-color);
  }
  &__jump{
    display: none !important;
  }
  &__sizes{
    display: none !important;
  }
}

/**
 **
 **/
.el-breadcrumb {
  &__separator {
    color: var(--text-color-2);
  }
}

/**
 ** tag标签
 **/
.udp-custom-tag {
  .el-tag {
    border-width: 0;
    background: rgba(29, 112, 245, 0.1);
    color: #1a73e1;
  }

  .el-tag.el-tag--info {
    background: rgba(71, 193, 179, 0.1);
    border-color: #e9e9eb;
    color: #47c1b3;
  }

  .el-tag.el-tag--success {
    background: rgba(124, 185, 44, 0.1);
    color: #7cb92c;
  }

  .el-tag.el-tag--warning {
    background: rgba(235, 177, 5, 0.1);
    color: #ebb105;
  }

  .el-tag.el-tag--danger {
    background-color: rgba(245, 114, 49, 0.1);
    color: #f57231;
  }
}

/**
 **  DropDown
 **/
.el-dropdown-menu.el-popper {
  // padding: 10px 14px;
}

.el-dropdown-menu__item {
  // padding-left: 0;
  color: #222222;
}

.el-dropdown-menu__item .delete-app {
  color: #cc3c29;
}

.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: #e3f0ff;
  color: #1d70f5;
}

.el-dropdown-menu__item--divided {
  border-top-color: #efefef;
}

::-webkit-scrollbar-thumb:hover {
  height: 50px;
  background-color: #9f9f9f;
  -webkit-border-radius: 4px;
}

::-webkit-scrollbar {
  /*滚动条整体样式*/
  /*高宽分别对应横竖滚动条的尺寸*/
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  // background-color: #fd8c34;
  background-color: #4b8dff;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
}

::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #ebeef5;
  border-radius: 10px;
}

// ------以下是新增的相关内容------- //

/* Element 输入框 */
.el-input > .el-input__inner,
.el-date-editor {
  height: 32px;
  // border-radius: 4px;
}

/* 设置光标颜色为红色 */
input,
textarea:focus {
  caret-color: #4489ee;
}

/* Element 输入区 */
.el-textarea {
  > .el-textarea__inner {
    border-radius: 4px;
  }
}

/* Element 数字输入框 */
.el-input-number {
  &.is-controls-right {
    line-height: 1.8rem;

    .el-input-number__decrease,
    .el-input-number__increase {
      height: 16px;
    }
  }
}

/* Element 按钮 */
.el-button {
  padding: 0 16px;
  min-width: 74px;
  border-radius: 2px;

  &--small {
    min-width: 58px;
    padding: 0 8px;
    height: 24px;
    font-size: 14px;
  }

  &--large {
    min-width: 96px;
    padding: 0 24px;
    height: 40px;
    font-size: 16px;
  }

  &--primary {
    background-color: var(--primary-color);
    color: var(--text-color-inverse);
    border-color: var(--primary-color);

    &:hover {
      background-color: #255db0;
      border-color: #255db0;
    }

    &:active {
      background-color: #255db0;
      border-color: #255db0;
    }
  }

  &--default {
    border: 1px solid var(--text-color-3);
    // color: #555;
  }

  &--warning {
    background-color: var(--warn-color);
  }

  &--danger {
    background-color: var(--error-color);
  }

  &--text {
    color: var(--primary-color);
    padding: 0;
  }

  &--customMini {
    min-width: unset !important;
    width: 34px;
  }

  & + .el-button {
    margin-left: variables.$mainSpace;
  }

  &.is-circle {
    width: variables.$elButtonHeight;
    height: variables.$elButtonHeight;
    padding: 0;
  }
}

/* Element Radio Group 单选框 */
.el-radio-group {
  min-width: #{$width};
}

/* Element Radio 单选按钮 */
.el-radio {
  &__input.is-checked span.el-radio__inner {
    background: transparent;
  }

  &__input.is-checked span.el-radio__inner:after {
    background-color: var(--el-color-primary);
    height: 7px;
    width: 7px;
  }

  &__input.is-disabled.is-checked &__inner:after {
    background-color: var(--el-text-color-placeholder);
  }

  &__input.is-checked+.el-radio__label {
    // color: var(--text-color-1) !important;
  }
}
.el-radio__input.is-checked
{
  .el-radio__inner{
    background-color: var(--block-bg-color);
    &::after{
      background-color: var(--active-block-bg-color);
      width: 7px;
      height: 7px;
    }
  }
}
.el-radio-button{
  &.is-active:not(.is-disabled) {
    .el-radio-button__original-radio:not(:disabled)+.el-radio-button__inner {
      border-color: var(--border-color-1);
      color: var(--primary-bg-color);
      background-color: var(--block-bg-color-1)
    }
  }
  &.is-disabled{
    &.is-active {
      .el-radio-button__inner {
        background-color: var(--disabled-color);
        &:hover {
          color: var(--disabled-color);
        }
      }
    }
    .el-radio-button__inner {
      background-color: var(--block-bg-color-2);
      &:hover {
        color: var(--disabled-color);
      }
    }
  }
  
  .el-radio-button__inner {
    color: var(--text-color-2);
    &:hover{
      color: var(--primary-bg-color);
    }
  }
}

/* Element PopOver气泡提示 */
.el-popover.el-popper {
  max-width: 400px;
}

/* Element Dialog弹窗 */
$dialog: el-dialog;
.#{$dialog} {
  border-radius: 4px;
  // width: var(--mobile-dialog-width, 50%);

  &__header {
    @include mixin.header;

    .#{$dialog}__title {
      @include mixin.title;
    }

    // 重写Dialog弹窗关闭按钮
    .#{$dialog}__headerbtn {
      @include mixin.closeBtn;
    }

    // 隐藏原来的关闭按钮
    .#{$dialog}__close {
      display: none;
    }
  }

  &__footer {
    text-align: center;

    button {
      @include mixin.footerBtn;
    }
  }
}

/* Element Dialog微型弹窗 */
.#{$dialog}-tiny {
  width: 400px;
}

/* Element Dialog小型弹窗 */
.#{$dialog}-small {
  width: 560px;
}

/* Element Dialog中型弹窗 */
.#{$dialog}-middle {
  width: 760px;
}

/* Element Dialog大型弹窗 */
.#{$dialog}-large {
  width: 960px;
}

/* Element Dialog自定义弹窗 */
.#{$dialog}-custom {
  padding: 0px 0px 24px;
  max-width: 1100px;
  max-height: 600px;

  .#{$dialog}__header {
    height: 56px !important;
  }

  .#{$dialog}__body {
    padding: 16px;
  }

  .#{$dialog}__footer {
    padding-top: 0px;
  }
}

/* Element Drawer抽屉 */
$drawer: el-drawer;

.#{$drawer} {
  .#{$drawer}__header {
    @include mixin.header;
    margin-bottom: 1px;

    & > :first-child {
      @include mixin.title;
      flex: none;
    }

    .#{$drawer}__close-btn {
      position: absolute;
      right: 20px;
      padding: 0;
      border: none;
      outline: 0;
      cursor: pointer;
      font-size: 16px;
      @include mixin.closeBtn;

      & .#{$dialog}__close {
        color: #909399;
      }

      &:hover {
        .#{$dialog}__close {
          color: #409eff;
        }
      }
    }
  }

  .#{$drawer}__body {
    padding: 25px 25px 61px;
  }

  .drawer-footer {
    background: #fff;
    border-top: 1px #ebeef5 solid;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 20px 20px;
    z-index: 9999;

    button {
      @include mixin.footerBtn;
    }
  }
  .lcds-root-container {
    height: unset;
  }
}

/* Element Tag标签 */
$tag: el-tag;

.#{$tag} {
  height: 20px;
  font-size: 14px;
}

// 小标签
.#{$tag}.#{$tag}--small {
  height: 18px;
  font-size: 12px;
}

.#{$tag}.#{$tag}--large {
  height: 24px;
}

// tabs
.el-tabs {
  .el-tabs__nav {
    .el-tabs__active-bar {
      background-color: var(--primary-bg-color);
    }
    .el-tabs__item {
      height: 32px;
      &.is-active {
        color: var(--text-color-1);
      }
      &.is-disabled {
        cursor: not-allowed;
        &:hover {
          color: var(--disabled-color);
        }
      }
      &:hover {
        color: var(--text-color-1);
      }
    }
  }
}

// 日期框
.el-date-editor {
  .el-input__inner {
    &:hover {
      cursor: pointer;
    }
  }
}
.el-date-picker.has-sidebar {
  width: 322px;
}
.el-picker-panel__body-wrapper {
  .el-picker-panel__sidebar {
    right: 0px;
    bottom: 0px;
    width: 100%;
    top: auto;
    border-top: 1px solid #ccc;
    border-right: none;
    padding-top: 0px;
    .el-picker-panel__shortcut {
      text-align: right;
      color: var(--active-block-bg-color);
      padding-right: 15px;
    }
  }
  .el-picker-panel__body {
    margin-bottom: 20px;
    margin-left: 0px !important;
  }
}